<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title> 家計簿　</title>
    <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/dateselect.js"></script>
    <script type="text/javascript" src="js/abstract_list.js"></script>
    <script type="text/javascript" src="js/day_account_list.js"></script>
    <script type="text/javascript" src="js/category.js"></script>
    <script type="text/javascript" src="js/table.js"></script>
    <link href="css/account.css" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" href="favicon.ico">
    <!--[if IE]>
    <link rel="stylesheet" href="css/ie.css" type="text/css"/>
    <![endif]-->
  </head>
<body>
  {% include "_menu.html" %}
  <form id="account" action="/" method="post">
    <div id="top_form" style="height:240px;">
        <div class="bold" id="totalAccount"></div> 
        <div class="side_left">
            <div id="account_date">
            </div>
            <div>
              <span class="title" id="items_span"></span>
            </div>
            <div id="price_div">
              <span class="title">金額</span>
              <input type="text" name="price" id="account_price" size="30" style="{ime-mode : disabled}"/>
              <input type="button" tabindex=-1 value="計算" onclick="calculate();return false;"/>
              <br>
              <span class="mini">+,-,*(掛ける),/(割る)()カッコを使って計算を押すと計算結果に変わります</span>
            </div>
            <div>
              <span class="title">内容</span>
              <textarea rows="3" cols="18" id="account_content" name="content"></textarea>
              <br/>
              <input type="submit" style="margin-left:25px;margin-top:10px;" value="登録" onclick="return dataSend()"/>
            </div>
        </div>
        <div class="side_right">
            <div id="bottom_title" class="bold" >メモ</div>
            <div id="bottom_memo"></div>
            <div id="button_div"></div>
        </div>
    </div>
  </form>
  <div id="accountTitle"></div>
  <div id="accountTable"></div>
  <hr/>
  <div id="account_sum"></div>
  <script type="text/javascript">
    var dayMemo=null;
    var dateSelector = null;
    var accountData = null;
    var categoryData= null;
    function calculate()
    {
      if($F('account_price').match(/^[\d\.\+\-\*\/()]+$/))
      {
        var result;
        eval("result="+$F('account_price'));
        $('account_price').value=parseInt(result,10);
      }
      else
      {
        alert("計算式として認識できない文字があります。");
      }
    }
    function dispMemo()
    {
        $('bottom_memo').innerHTML=""
        if(!dayMemo.memo)
        {
            $('button_div').update('<input type="button" tabindex="-1" value="メモ作成" onclick="editMemo();"/>');
            return; 
        }
        $('button_div').update('<input type="button" tabindex="-1" value="メモ編集" onclick="editMemo();"/>');
        $('bottom_memo').update('<label>'+dayMemo.memo.escapeHTML()+'</label>');
    }
    function editMemo()
    {
      $('button_div').update('<input type="button" tabindex="20" value="更新" onclick="setMemo();"/>'+
                              '<input type="button" tabindex="21" value="キャンセル" onclick="dispMemo();"/>');
      $('bottom_memo').update('<textarea id="bottom_memo_data" rows="5">'+dayMemo.memo+'</textarea>');
    }
    function setMemo()
    {
	    var a = new Ajax.Request( 
	        "/setMemo", 
	        { 
	            "method": "post",
              "parameters": Form.serialize("account")+"&memo="+$('bottom_memo_data').value,
              onSuccess: function(response) { 
                var clean = response.responseText.gsub(/</,"&lt;").gsub(/>/,"&gt;").gsub(/'/,"&apos;");
                dayMemo = clean.evalJSON(true);
                dispMemo();             
	            }, 
	            onFailure: function(request) { 
	                alert('読み込みに失敗しました'); 
	            }, 
	            onException: function (request) { 
	                alert('読み込み中にエラーが発生しました'); 
	            } 
	        }); 
      return false;

    }
    function getMemoData()
    {
	    var a = new Ajax.Request( 
	        "/memo.json", 
	        { 
	            "method": "get",
	            "parameters": Form.serialize("account")+"&"+makeTemporaryQuery(),
	            onSuccess: function(response) { 
                var clean = response.responseText.gsub(/</,"&lt;").gsub(/>/,"&gt;").gsub(/'/,"&apos;");
                dayMemo = clean.evalJSON(true);
                dispMemo();             
	            }, 
	            onFailure: function(request) { 
	                alert('読み込みに失敗しました'); 
	            }, 
	            onException: function (request) { 
	                alert('読み込み中にエラーが発生しました'); 
	            } 
	        }); 
      return false;
    }
    function dataSend()
    {
      if($F("category")==null)
      {
        alert("項目が選択されていません。");
        return false;
      }
      if($F("account_price")=="")
      {
        alert("金額が入力されていません。");
        return false;
      }
      if($F("account_price").match(/\D/))
      {
        alert("金額に数字以外の文字が含まれています");
        return false;
      }
      if(!$F("account_content"))
      {
        alert("内容が記載されていません。")
        return false;
      }
	    var a = new Ajax.Request( 
	        "/addAccount", 
	        { 
	            "method": "post", 
	            "parameters": Form.serialize("account"), 
	            onSuccess: function(request) { 
                $('account_content').value=""
                $('account_price').value=""
                setAccountData();             
	            }, 
	            onFailure: function(request) { 
	                alert('読み込みに失敗しました'); 
	            }, 
	            onException: function (request) { 
	                alert('読み込み中にエラーが発生しました'); 
	            } 
	        }); 
      return false;
    }
    function setAccountData()
    {
      getMemoData();
      setTotalAccount();
      var dateStr = $F('account_year')+"年"+$F('account_month')+"月"+$F('account_day')+"日";
      var tableTitle = '<span class="title">'+dateStr+'の金額一覧 </span>';
      $('accountTitle').update(tableTitle);
      accountData = new DayAccountList({params:Form.serialize("account").parseQuery(),call_back:makeTable});
    } 
    function setTotalAccount()
    {
	    var a = new Ajax.Request( 
	        "/gettotalaccount", 
	        { 
	            "method": "get", 
	            "parameters": Form.serialize("account")+"&"+makeTemporaryQuery(),
	            onSuccess: function(request) { 
                var total = 0;
                if(request.responseText)
                { 
                    var clean = request.responseText.gsub(/</,"&lt;").gsub(/>/,"&gt;").gsub(/'/,"&apos;");
                    dataSet = clean.evalJSON(true);
                    for(data in dataSet)
                    {
                        total += dataSet[data];
                    }
                }
                $('totalAccount').update('<span class="date_title">' + $F('account_year') +
                  '年'+$F('account_month')+'月の合計:</span>'+ myFormatNumber(total) + '円');
	            }, 
	            onFailure: function(request) { 
	                alert('読み込みに失敗しました'); 
	            }, 
	            onException: function (request) { 
	                alert('読み込み中にエラーが発生しました'); 
	            } 
	        }); 
    }
    var accountTable=null;
    function makeTable(dataSet){
      accountTable = new SortableTable({id:'accountTable',data_set:dataSet,block_num:10,call_back:add_observe});
      $('account_sum').update("合計:"+ myFormatNumber(accountData.sum) + "円");
    }
    function add_observe(){
      accountData.addObserve();
    }
  document.observe('dom:loaded',function(){
      var queryHash = window.location.search.parseQuery();
      dateSelector = new DateSelector('account','account_date',
              setAccountData,queryHash["year"],queryHash["month"],queryHash["day"],true);
      categoryData = new CategoryData('items_span',"init");
      $('account_price').select();
    });
  </script>
</body>
</html>
